<template>
	<div class="slider">
		<div class="silder_left">
			<div class="slider_logo">
				<img style="width: 60px;" src="../../images/logo.png" alt="金紫尖">
			</div>
			<!-- 高度为减去logo+底部 -->
			<ul id="firstMenu_ul" :style="{height:($store.state.menu.device.height - 90 - 75) + 'px'}">
				<li @click="firstMenuClickEvent($event)" v-for="item in menuList" :class="[item.icon,f_index==item.name?'active':'']" :key="item.name" :type="item.name" v-text="item.name"></li>
			</ul>
			<el-popover placement="bottom" v-model="popoverisShow" width="127" trigger="click" :style="{textAlign: 'center'}">
				<div @click="loginOut" class="dropdown">
					退出系统
				</div>
				<div slot="reference" class="userInfoWrap">
					<div style="color: #E0E0DE; padding-top: 17px; text-align: center; cursor: pointer">
						<div style="background: #f5f5f5; width: 24px; height: 24px; border-radius: 50%;display: inline-block">
							<img src="../../images/adm.png" alt="头像">
						</div>
						<br>
						<span>{{ admin }}</span>
						<span :class="[popoverisShow ? 'el-icon-caret-top' : 'el-icon-caret-bottom', ]"></span>
					</div>
				</div>
			</el-popover>
		</div>
		<div v-show="$store.state.menu.isNextMenuShow" class="silder_right">
			<div class="silder_right_top">
				<h4 :style="{textAlign: 'center', margin: '0', padding: '0', lineHeight: '45px', color: '#313131'}" >{{ nextMenuTitle }}管理</h4>
			</div>
			<ul id="secondMenu_ul">
				<li @click="secondMenuClickEvent($event)" v-for="item in nextMenuList" :class="s_index==item.name?'active':''" :key="item.name" :name="item.name" v-text="item.meta.title"></li>
			</ul>
		</div>
	</div>
</template>

<script>
	import { mapMutations } from 'vuex';
	
	import { appRouter } from '@/views/router';
	
	export default {
		name: "Slider",
		data() {
			const admin = localStorage.getItem('admin_name')
			return {
				admin,
				menuList: [],
				nextMenuList: [],
				popoverisShow: false,
				nextMenuTitle: "二级栏目",
				f_index: '',
				s_index: ''
			};
		},
		computed: {},
		watch: {
			'$store.state.menu.menuListArr' () {
				this.init()
			},
			'$route' () {
				this.init();
			}
		},
		mounted() {
			this.init();
		},
		created() {},
		methods: {
			...mapMutations([
				'setNextMenuShow',
			]),
			init() {
				// 角色权限
				const roleId = localStorage.getItem('role_id')
				if(roleId === '1') {
					this.menuList = appRouter.filter((item) => {
						
						return item.path !== '/setting'
					})
					
				}else if(roleId === '0'){
					this.menuList = appRouter
				}
				
				
				var curName = this.$route.name;
				var isNextMenuShow = false
				this.menuList.forEach(obj => {
					
					obj.children && obj.children.length > 0 ?
						obj.children.forEach(item => {
							if(curName.indexOf(item.name) >= 0) {
								this.f_index = obj.name;
								this.nextMenuList = obj.children;
								this.nextMenuTitle = obj.name;
								this.s_index = item.name;
								item.path !== 'home-page' ? isNextMenuShow = true : ''
							}
						}) : obj.path === curName ? this.f_index = obj.name : ''
				})
				

				this.setNextMenuShow(isNextMenuShow)
			},
			// 切换左侧一级菜单slider时获取默认值path,有children默认取下标[0]的path
			firstMenuClickEvent($event) {
				var target = $event.currentTarget;
				var type = target.getAttribute("type")
				var name = ''
				this.menuList.forEach(obj => {
					if(obj.name == type) {
						name = obj.name
						obj.children && obj.children.length > 0 ? this.s_index = name = obj.children[0].name : ''
					}
				});
				
				//当前路由，点击不生效
				if(this.$route.name === name) {	
					
					return
				}
				
				
				this.$router.push({
					name: name
				});
			},
			// 切换左侧二级菜单slider时的默认值设置
			secondMenuClickEvent($event) {
				var target = $event.currentTarget;
				var name = target.getAttribute("name");
				
				//当前路由，点击不生效
				
				if(this.$route.name === name) {	
					
					return
				}
				
				
				
				this.s_index = name;
				
				
				console.log(name,5566)
				

				this.$router.push({
					name: name
				});
			},
			editPasswordEvent() {
				this.$router.push({
					path: "/editPassword" 
				});
			},
			loginOut() {
				var access_token = localStorage.getItem('access_token');
				this.$confirm('您确定要退出系统吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					if(access_token) {
						localStorage.clear();
						this.$router.push({
							path: '/login'
						})
					}
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});

			}
		},
	};
</script>
<style lang="scss">
	.slider {
		height: 100%;
		float: left;
		.slider_logo {
			text-align: center;
			width: 100%;
			height: 90px;
			line-height: 90px;
			img {
				vertical-align: middle;
			}
		}
		#firstMenu_ul {
			overflow-y: auto;
		}
		.silder_left {
			width: 90px;
			height: 100%;
			background: #2c303c;
			float: left;
			box-sizing: border-box;
			position: relative;
		}
		.silder_left .active {
			background: #f5f5f5;
			color: #313131;
		}
		.silder_left li {
			text-align: center;
			color: #dcdedc;
			width: 100%;
			padding: 10px 0px;
			margin: 10px 0;
			cursor: pointer;
		}
		.silder_right {
			width: 110px;
			height: 100%;
			background: #ffffff;
			float: right;
			border-right: 1px solid #e4e8eb;
			color: #636365;
			box-sizing: border-box;
			border-bottom: none;
		}
		.silder_right_top {
			width: 100%;
			height: 45px;
			border-bottom: 1px solid #e4e8eb;
		}
		.silder_right li {
			width: 90px;
			text-align: center;
			box-sizing: border-box;
			padding: 7px 0;
			margin: 13px 0 13px 0;
			margin-left: 7px;
			border-radius: 3px;
			cursor: pointer;
		}
		.silder_right li:hover {
			color: #409eff;
		}
		.silder_right .active {
			background: #f5f5f5;
		}
		ul {
			list-style: none;
			text-align: center;
			padding: 0;
		}
		.silder_left ::before {
			margin-right: 10px;
		}
		.userInfoWrap {
			width: 100%;
			height: 75px;
			background: #374455;
			position: absolute;
			bottom: 0;
		}
		.el-popover {
			min-width: 100px;
		}
		.dropdown {
			text-align: center;
			margin: 5px 0;
			padding: 5px 0;
			cursor: pointer;
		}
		.dropdown:hover {
			background: #ecf5ff;
			color: #66b1ff;
		}
	}
</style>